<template>
  <div class="userSystem">
    <mynav title="账号与隐私设置" :path="path"></mynav>
    <userCell title="手机号" icon="&#xe653;"></userCell>
    <userCell title="修改密码" icon="&#xe653;"></userCell>
    <div class="c1">
      <span>开启后，可以让你的好友找到你</span>
      <!-- <i class="iconfont">&#xe653;</i> -->
    </div>
    <van-cell center title="允许将我推荐给好友" class="c4">
      <template #right-icon>
        <van-switch v-model="checked" size="20" />
      </template>
    </van-cell>
    <div class="c2"><span>开启后，可以向你推荐好友</span></div>
    <van-cell center title="允许将我推荐给可能认识的人" class="c4">
      <template #right-icon>
        <van-switch v-model="checked2" size="20" />
      </template>
    </van-cell>
    <div class="c3">
      <span>开启后，分享到微信QQ等平台的页面会显示你的头像</span>
    </div>
    <van-cell center title="分享页显示我的头像" class="c4">
      <template #right-icon>
        <van-switch v-model="checked3" size="20" />
      </template>
    </van-cell>
  </div>
</template>

<script>
import mynav from '@/components/mynav'
import userCell from './userCell'
export default {
  components: {
    mynav,
    userCell
  },
  data () {
    return {
      path: '/home/user',
      checked: true,
      checked2: true,
      checked3: true
    }
  },
  methods: {}
}
</script>

<style lang="less">
.userSystem {
  .c1,
  .c2,
  .c3 {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    height: 36px;
    background-color: #f5f7f9;
    span {
      font-family: MicrosoftYaHei;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 36px;
      letter-spacing: 0px;
      color: #999999;
    }
    i {
      line-height: 36px;
      font-size: 14px;
      color: #ccc;
    }
  }
}
</style>
